//This code chunk returns a random image (currently placeholders) on load
//If a different number of images are in the folder, make sure to change the "num" variable
{
var imgs = document.getElementsByClassName('myClass1');

  for (var i = 0; i < imgs.length; i++) {
    var num = Math.floor(Math.random() * 4 + 1);
    imgs[i].src = 'images/placeholder' + num + '.jpg';
    imgs[i].alt = imgs[i].src;
  }

}

correct_password = "glkn2023"
password = "glkn2023"

Plotly = require("https://cdn.plot.ly/plotly-2.16.1.min.js")

// Filter based on inputs.

filtered = data.filter(function(waterFilter) {
  return yearIn[0] <= waterFilter.Year &&
         yearIn[1] >= waterFilter.Year &&
         depthIn[0] <= waterFilter.Depth &&
         depthIn[1] >= waterFilter.Depth &&
         monthIn[0] <= waterFilter.Month &&
         monthIn[1] >= waterFilter.Month &&
         varname.includes(waterFilter.Variable) &&
         site.includes(waterFilter.Name);
})

//Bulding color schemes for drop-down menu
colors =  {  
    if (color_input == "default") {
      return ['#1f77b4',  '#ff7f0e',  '#2ca02c',  '#d62728',  '#9467bd',  '#8c564b',  '#e377c2',  '#7f7f7f',  '#bcbd22',  '#17becf',
                    '#1f77b4',  '#ff7f0e',  '#2ca02c',  '#d62728',  '#9467bd',  '#8c564b',  '#e377c2',  '#7f7f7f',  '#bcbd22',  '#17becf'];  
    } else if (color_input == "natural")  {
      return ['#378F8D', '#BADAF5', '#E5E2B2', '#C9AADB', '#AB5B26', '#00295B', '#006B46', '#BF7C9C', '#DBB600', '#F59E28',
      '#378F8D', '#BADAF5', '#E5E2B2', '#C9AADB', '#AB5B26', '#00295B', '#006B46', '#BF7C9C', '#DBB600', '#F59E28'];
    } else if (color_input == "roygbiv") {
      return['#F30109', '#FF6C00', '#FFEC00', '#00E526', '#3700E6', '#6B00E5', '#BC1EE6'];
    } else if (color_input == "sunset") {
      return['#D52D00', '#EF7627', '#FF9A56', '#D162A4', '#B55690', '#A30262'];
    } else if (color_input == "greyscale") {
      return['#2B2B2B', '#D4D4D4', '#545454', '#C9C9C9', '#828282', '#ADADAD'];
    } else if (color_input == "NPS") {
      return['#2C4A1E', '#C56C39', '#B9B6C1', '#0F4F7E', '#8E9A4C', '#000000'];
    } else if (color_input == "viridis") {
      return['#440154', '#FDE725', '#6DCD59', '#3E4A89', '#1F9E89', '#482878', '#B4DE2C', '#31688E', '#26828E', '#35B779'];
    }
  }

//Function to make scatter plots based on variable input.
function var_Plot(var_name) {
  if (password === correct_password) {
    let holder = [] 
    let holdercount = 0 
  
    let datalist = []
    let layoutlist = []
    let divlist = []

  
    let thisvar = var_name;
    
    if (typeof thisvar !== "undefined") { //make sure it is not undefined to avoid errors
      
      let df = filtered.filter(function(tracefilter){ //filter so that one variable at a time is used in each TRACE
        return thisvar.includes(tracefilter.Variable);
      })
      
      for (let s = 0; s <= site.length; s ++) { //loop through each selected site
        let thissite = site[s];
        
        if (typeof thissite !== "undefined") {
          let df_site = df.filter(function(sitefilter) { //filter so that one site at a time is used in TRACE
            return thissite.includes(sitefilter.Name); 
          })
        //}  
        let eachvar_y =     
          df_site.map(({Value:actualValue})=>actualValue);  //need to turn data into array (list of numbers to display on y-axis)
      
        let eachvar_x = 
          df_site.map(({Date:actualValue})=>actualValue); //list of dates for x axis
      
    
        let eachtrace  = { // make each trace
          y: eachvar_y,
          x: eachvar_x,
       //   xaxis: xnames[i],
       //s   yaxis: ynames[i],
          type: 'scatter',
          mode: 'markers',
          marker: {
          color: colors[holdercount] 
        }, 
          name: thissite
        };
        
        holder[holdercount] = eachtrace; //put into list
        holdercount++; 
        
        
        } //if not undefined s close
      } // s loop close
      
      var data = holder;

    var layout = {
      title: {
      text: var_name,
      font: {
          family: 'Arial',
          size: 14 }
      },
       yaxis: {
        title: 'Value'
      }, //HERE
      legend: {xanchor: 'right',
      bgcolor: '#E2E2E2',
      bordercolor: '#FFFFFF',
      borderwidth: 2},
      autosize: false,
      width: 500,
     height: 1000/varname.length,
      margin: {
        l: 50,
        r: 50,
        b: 30,
        t: 30,
        pad: 4
      }, 
    };

  
    const div = DOM.element("div"); //plots
    Plotly.newPlot(div, data, layout,  {responsive: true});
    return div; 
  
    
   } // if not undefined i close
    
  } //if close

} // function close
  
//return var_Plot();
//} // code block close

// Function to make boxplots 
function box_Plot(var_name) {
  if (password === correct_password) {
    let thisvar = var_name;
    
    if (typeof thisvar !== "undefined") { //make sure it is not undefined to avoid errors
      
      let df_var = filtered.filter(function(tracefilter){ //filter so that one variable at a time is used in each TRACE
        return thisvar.includes(tracefilter.Variable);
      })
      
    let holder = [] 

  
    for (let i = 0; i <= site.length; i ++) {
      let thissite = site[i];
    
      if (typeof thissite !== "undefined") {
        let df = df_var.filter(function(tracefilter){
        return thissite.includes(tracefilter.Name);
      })
    
        let eachvar_y = 
          df.map(({Value:actualValue})=>actualValue);
      
      function get_x(toggle_boxplot) {
        if (toggle_boxplot == true) {
         return df.map(({Year:actualValue})=>actualValue);
        } else {
          return df.map(({Month:actualValue})=>actualValue);
        }
      }
    
      let eachtrace  = {
        y: eachvar_y,
        x: get_x(toggle_boxplot),
        type: 'box',
        name: thissite,
        boxpoints: false,
        marker: {
          color: colors[i] 
          }
      };
    
      holder[i] = eachtrace;
    } // if not undefined s close
  } //i loop close

    var data = holder;
  
    var layout = {

    autosize: false,
      width: 500,
      height: 1000/varname.length, //maybe make if varname.length == 1 {height = 800} or something
      margin: {
          l: 50,
          r: 50,
          b: 30,
          t: 30,
          pad: 4
      }, 
      legend: {xanchor: 'right',
      bgcolor: '#E2E2E2',
      bordercolor: '#FFFFFF',
      borderwidth: 2},
      title: {
        text: var_name,
        font: {
            family: 'Arial',
            size: 14 }
        },
        yaxis: {
        title: 'Value'
        }, //HERE
      boxmode: 'group'
     };

    const div = DOM.element('div');
    Plotly.newPlot(div, data, layout, {responsive: true});
    return div; 

    } // not undefined var close 
  } //if password close
} // function close

//Filtering data for profile plots based on inputs on profiles tab
profileData = data.filter(function(waterFilter) {
  return year == waterFilter.Year &&
         month >= waterFilter.Month;

})

function profile_Plot(var_name) {
  if (password === correct_password) {
  //limitation- can only handle 30 traces 
  //here is where I could make a custom color scheme if I was feeling clever

//filter out so only the correct variable is being used
    let thisvar = var_name;
    
      if (typeof thisvar !== "undefined") { //make sure it is not undefined to avoid errors
      
        let df_var = profileData.filter(function(tracefilter){ //filter so that one var at a time is used in each TRACE
          return thisvar.includes(tracefilter.Variable);
        })
      
    //Now need to filter so that each trace is only one DATE at one SITE. 
    //Start w/ site:
     let holder = [] 
     let secchiholder = []
     let holdercount = 0 
     
    for (let i = 0; i <= site.length; i ++) { //site is an input (array)
  
      let thissite = site[i];
    
      if (typeof thissite !== "undefined") {
        let df_site = df_var.filter(function(tracefilter){
        return thissite.includes(tracefilter.Name) &&
        month == tracefilter.Month; //month is also an input. This is to cut down on crowdedness in the plot. Should result in 1-3 traces per site. 
      })
    
    let datelist = df_site.map(({Date:actualValue})=>actualValue);
    
    let outputArray = [];
    
    function removeusingSet(arr) {
      let outputArray = Array.from(new Set(arr))
      return outputArray
    }
    
    let unique = removeusingSet(datelist);
  
    
    for (let j = 0; j <= unique.length; j ++) {
      let thistrace = unique[j] 
      
      if (typeof thistrace !== "undefined") {
        let df = df_site.filter(function(tracefilter){
        return thistrace.includes(tracefilter.Date);
      })
    //Secchi stuff was here
       
      let thissecchi = getsecchi(thissite, thistrace)[0];
       
      let eachvar_y = 
        df.map(({Depth:actualValue})=>-actualValue);
        
      let eachvar_x = 
        df.map(({Value:actualValue})=>actualValue);
    
      let eachtrace  = {
        y: eachvar_y,
        x: eachvar_x,
       // type: 'scatter',
        name: thissite+" "+thistrace, 
        mode: 'lines+markers',
        marker: {
          color: colors[holdercount] 
        }
      };
      
      let secchiholdertemp =  {
        y: [thissecchi],
        x: [0],
        mode: 'markers',
        type: 'scatter',
        name: "",
        showlegend: false,
        marker: {
          symbol: 'square',
          size: 10,
          color: colors[holdercount] 
        },
         hovertemplate: 'Secchi Depth: %{y}m' +
                        '<br>'+thissite+'<br>' +
                        thistrace
      };
    
      secchiholder[holdercount] =secchiholdertemp; 
      holder[holdercount] = eachtrace; //put into list
      holdercount++; 
    
    } //this trace !undefined. Maybe move?
    } // if not undefined s close

  }// j loop close
} //i loop close
    
     var data = holder.concat(secchiholder);

    var layout = {
      title: {
      text: var_name,
      font: {
          family: 'Arial',
          size: 14 }
      },
       xaxis: {
        title: 'Value'
      },
       yaxis: {
        title: 'Depth'
      }, //HERE
      autosize: false,
      width: 400,
      height: 700,
     // shapes: secchiholder,
      margin: {
        l: 30,
        r: 30,
        b: 30,
        t: 30,
        pad: 4
  }, 
      };

  
    const div = DOM.element("div"); //plots
    Plotly.newPlot(div, data, layout);
    return div; 
    //return secchiholder
   } // if not undefined i close
    
  } //if password close


} // function close

//Get y-axis point to add secchi depth to profiel plot
function getsecchi(site, date) {
      let thissecchi = profileData.filter(function(secchiFilter){
        return site.includes(secchiFilter.Name) &&
        date.includes(secchiFilter.Date) &&
        "Depth, Secchi disk depth".includes(secchiFilter.Variable);
      })
    //  return Inputs.table(thissecchi) 
      
      if (thissecchi.length > 0) {
      let secchiVal = 
        thissecchi.map(({Value:actualValue})=>-actualValue);
        return secchiVal;
      } else {
        let secchiVal = 0;
        return secchiVal;
      
}
      
}

lat = station.map(({Latitude:actualValue})=>actualValue);  //need to turn data into array (list of numbers to display on y-axis)
      
long = station.map(({Longitude:actualValue})=>actualValue); //list of dates for x axis
          
names = station.map(({Name:actualValue})=>actualValue);

function makeArray(sitearray) { //makeArray is a function
    let sets = [];
    for (let s = 0; s <= sitearray.length; s ++) { //loops through the length of "names" to make sets
      let pairs = [];
      pairs[0] = sitearray[s];
      pairs[1] = lat[s]
      pairs[2] = long[s];
      sets[s] = pairs};
      return sets;
  }
list_of_pairs = [makeArray(names)][0];

// results variable for tracking site selections
mutable results = []; //HERE

waterIcon = L.icon({
    iconUrl: 'images/waterdrop.png',
    iconSize:     [15, 20], // size of the icon
    iconAnchor:   [5, 12], // point of the icon which will correspond to marker's location
    popupAnchor:  [-3, -7] // point from which the popup should open relative to the iconAnchor
});

waterIcon2 = L.icon({
    iconUrl: 'images/waterdrop.png',
    iconSize:     [28.6, 37.2], // size of the icon
    iconAnchor:   [10, 24], // point of the icon which will correspond to marker's location
    popupAnchor:  [-5, -13] // point from which the popup should open relative to the iconAnchor
});


// indexOf returns index number if e exists, -1 otherwise.
//This checks to see if marker is already in results list or not. 
idx = (e) => { return results.indexOf(e.properties.Name); };
  
//this is just for popups
highlightFeature = (e) => {

   // e.target.setStyle(styles.highlight); 
    //e.target.bringToFront();
    e.target.openPopup();
  
  };
 //also just for popups 
resetHighlight = (e) => { 

    //let q = (idx(e.target) < 0) ? styles.basic : styles.select;
    
    //e.target.setStyle(q);
    e.target.closePopup();
  
  };
  
//This is the important part!!
toggleFeature = (e) => {
    //see idx function above 
    const i = idx(e.target);
    
    if (i > -1) { //if the selected point is already in the results list
            
     results.splice(i, 1); //remove site from results list and set icon to waterIcon
     e.target.setIcon(waterIcon);
     syncMapAndCheckboxes(e.target.properties.Name, false);
      
    } else {
      //if it is not already there, put it there and change icon       
      results.push(e.target.properties.Name); 
      e.target.setIcon(waterIcon2);
      syncMapAndCheckboxes(e.target.properties.Name, true);
     // treeInput()(e.target.properties.Name);

    };
   
  
 set(viewof site, results); 
 // set(results, viewof site); 

  };

// Makes markers 
markers = {
 if (password === correct_password) {
 var markers = {};
    
    for (var i = 0; i < 74; i++) { //need to replace 74 but putting a variable length here breaks it so I am afraid to. 
      let id_name = [list_of_pairs[i][0]];
      //This is in case inputs are selected when map is loaded.
      //Untested: might break. 
      function determineIcon(input) {
        if (results.includes(input)) {
          return waterIcon2
          } else {
          return waterIcon
         }
      }
      //shorthand for this i
      let name_id = list_of_pairs[i][0]
      
      markers[name_id] = new L.marker([list_of_pairs[i][1], list_of_pairs[i][2]],
      {icon: determineIcon(list_of_pairs[i][0]),
      options: {Name: list_of_pairs[i][0]}, //this may be unnecessary 
      id: list_of_pairs[i][0],
      keyboard: false
      })  //also this 
    //Add event listeners 
      .on('mouseover', highlightFeature)
      .on('mouseout', resetHighlight)
      .on('click', toggleFeature)
      .bindPopup(list_of_pairs[i][0])
      
      .addTo(glknParks);
     //This part allows markers to be called by checkbox inputs by creating an object
     //Where the key is the site name and the value is the marker. 
     markers[name_id].properties = {};
     markers[name_id].properties.Name = list_of_pairs[i][0];
    
      
    } //for loop close
  
  return markers;
 } //if close
}

justSelected = () => {

//TO ADD SITES FROM RESULTS -- difference bwtn this and set?   
 if (site.length >= 0) { //otherwise will throw "undefined", the bane of my existence 
 //Figure out which sites are not in results. 
 //Should just be one but it doesn't work unless it's in a loop.
 //Maybe something to do with extracting the value from array (map might work) but 
 //it's working so I'm not going to worry about it.
  let difference1 = site.filter(x => results.indexOf(x) === -1);
   for (var i = 0; i < difference1.length; i++) {
      var mysite = difference1[i];
      markers[mysite].setIcon(waterIcon2);
      results.push(mysite); //put it into results to merge w/ sites selected from map. 
      syncMapAndCheckboxes(mysite, true);
   }
 }
 
//TO REMOVE SITES
//Basically the same process backwards. 
//Figure out which sites are in results still, but not in site anymore: (deselected w/ checkbox)
 let difference = results.filter(x => site.indexOf(x) === -1);
 
//For each of those, change icon back and remove from results. 
 if (difference.length >= 0) {
  for (var j = 0; j < difference.length; j++) { //might not need
    var mysite = difference[j];
    markers[mysite].setIcon(waterIcon);
   const index = results.indexOf(mysite);
    results.splice(index, 1);
    syncMapAndCheckboxes(mysite, false);
 //   const checkboxElement = document.querySelector(`input[name="${mysite}"]`);
   // checkboxElement.checked = false;
   // let whichpark = matching(mysite);
  //  `{whichpark}In`.splice(i, 1);
    
  }

 }

}

justSelected();

// push results to viewof site (site input)
//This is only called for toggleFeature when sites are clicked from map, 
//NOT called when sites are selected from checkboxes (to prevent weirdness)
function set(input, value) {
  input.value = value;
  input.dispatchEvent(new Event("input", {bubbles: true}));
}

//Initiate leaflet map
L = {
  const L = await require("leaflet/dist/leaflet.js");
  if (!L._style) {
    const href = await require.resolve("leaflet/dist/leaflet.css");
    document.head.appendChild(L._style = html`<link href=${href} rel=stylesheet>`);
  }

  return L; //to call leaflet, use "L" (ie L.marker)
};

//Add tiles to the map. 
//Currently using openstreetmap b/c it doesn't have the loading issue that stamen does. 

glknParks = {
  
  let map = L.map(container);
  
  var lidarBase = L.tileLayer.wms(
'https://elevation.nationalmap.gov/arcgis/services/3DEPElevation/ImageServer/WMSServer?',

    {
        layers: '3DEPElevation:Hillshade Gray',
        className: 'lidarBase',
        attribution: 'U.S. Geological Survey National Map - 3D Elevation Program Lidar'
    }
);

 var OpenStreetMap_Mapnik = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
  
   L.control.layers(
    {
      "Open Street Map": OpenStreetMap_Mapnik,
      "LiDAR": lidarBase
    },
    null,
    {position: 'topleft'}
  ).addTo(map);
  
  L.control.scale().addTo(map);
  //setView is my best estimation but should be fiddled with later
  map.setView([44.8, -90], 7);

  return map; 

};